<script setup lang="ts">
import { type CSSProperties, ref, computed } from "vue";

import gsap from 'gsap'

const props = withDefaults(defineProps<{
  visible: boolean,
  position: string,
  width: CSSProperties['width'],
  backgroundColor: CSSProperties['background-color']
}>(), {
  visible: false,
  width: '300px',
  position: 'right',
  backgroundColor: '#0c0c0c26'

})



const sytle = computed(() => {
  if (props.position === 'left') {
    return {
      left: 0
    }
  }
  return {
    right: 0
  }
})

// 进入的动画
const enterFrom = (el: Element) => {
  gsap.set(el, {
    width: 0,
    // height: 0
  })
}

const enterActive = (el: Element, done: gsap.Callback) => {
 gsap.to(el, {
  width: props.width,
  // height: '100%',
  onComplete: done
 })
}

// 离开的动画

const leaveActive = (el: Element, done: gsap.Callback) => {
  gsap.to(el, {
    width: 0,
    // height: 0,
    onComplete: done
 })
}

console.log('props', props, sytle)

</script>

<template>
  <!-- <div class="drawerBox" > -->
    <transition
      :duration="600"
      @before-enter="enterFrom"
      @enter="enterActive"
      @leave="leaveActive"
    >
    <div class="contentBox" v-if="visible" :style="sytle">
      <slot></slot>
    </div>
    </transition>
  <!-- </div> -->
</template>

<style scoped lang="scss">
// .drawerBox {
//   width: 100%;
//   height: 100%;
//   position: relative;
//   background-color: green;
// }
.contentBox {
  width: v-bind(width);
  height: 100%;
  background: v-bind(backgroundColor);
  position: absolute;
  top: 0;
  right: 0;
}
</style>
